<template>
<div class="container">
  <div class="title">
    <span>确认挂号信息</span>
  </div>
<!-- 就诊人-->
  <div class="visitor">
   <div class="visitor_title">
     <span class="shu"></span>
     <span>选择就诊人</span>
   </div>
    <div class="visitor_card">
      <div v-for="(item,index) in VisitorList" :key="index" class="card" @click="change_selected(item)"
           :class="{active:selectedVisitor.id===item.id}">
        <div class="info" >
          <span class="name">{{item?.name}}</span>
          <span class="idCard" :class="{active:selectedVisitor.id===item.id}">身份证:</span>
          <span class="idCard" :class="{active:selectedVisitor.id===item.id}">{{item?.certificatesNo}}</span>
        </div>
        <div class="icon" >
          <el-icon color="white" size="35px" ><CircleCheckFilled /></el-icon>
        </div>
      </div>
      <div class="card">
        <div class="add" @click="addVisitor">
          <span>+添加就诊人</span>
        </div>
      </div>
    </div>
  </div>

<!--  就诊卡-->
<div class="visit_card_container">
  <div class="visit_card_title">
    <span class="shu"></span>
    <span>选择就诊卡</span>
    <span class="attention">如您持社保卡就诊，请务必选择医保预约挂号，以保证正常医保报销</span>
  </div>
  <div class="visit_card">
    <div class="card-header">
      <span>{{selectedVisitor?.name}} {{selectedVisitor?.certificatesNo}}
        {{selectedVisitor?.param?.certificatesTypeString}}</span>
    </div>
    <el-divider style="margin: 0;width: 95%" />
    <div class="selected_info">
      <div>
        <span class="visit_type">{{selectedVisitor?.isInsure===1?'医保':'自费'}}</span>
        <span>{{selectedVisitor?.certificatesNo}}&nbsp;&nbsp;&nbsp;&nbsp;{{selectedVisitor?.param?.contactsCertificatesTypeString}}</span>
      </div>
    </div>
  </div>
</div>
<!--  挂号信息-->
  <div class="register_info">
    <div class="register_info_title">
      <span class="shu"></span>
      <span>挂号信息</span>
    </div>
    <div class="register_container">
      <div>
        <span class="title">就诊日期:</span>
        <span class="content">{{doctorInfo?.workDate}}&nbsp;&nbsp;{{doctorInfo?.param.dayOfWeek}}&nbsp;&nbsp;{{doctorInfo?.workTime===0?'上午':'下午'}}</span>
      </div>
      <div>
        <span class="title">就诊医院:</span>
        <span class="content">{{doctorInfo?.param.hosname}}</span>
      </div>
      <div>
        <span class="title">就诊科室:</span>
        <span class="content">{{doctorInfo?.param.depname}}</span>
      </div>
      <div>
        <span class="title">医生姓名:</span>
        <span class="content">{{doctorInfo?.docname}}</span>
      </div>
      <div>
        <span class="title">医生职称:</span>
        <span class="content">{{doctorInfo?.title}}</span>
      </div>
      <div>
        <span class="title">医生专长:</span>
        <span class="content">{{doctorInfo?.skill}}</span>
      </div>
      <div>
        <span class="title">医事服务费:</span>
        <span class="content">{{doctorInfo?.amount}}</span>
      </div>
    </div>
  </div>
<!--  用户信息-->
  <div class="user_info">
    <div class="user_info_title">
      <span class="shu"></span>
      <span>用户信息</span>
    </div>
    <div class="user_info_container">
      <div>
        <span class="title">就诊人手机号:</span>
        <span class="content">{{selectedVisitor?.phone}}</span>
      </div>
    </div>
  </div>
  <div class="ensure">
    <el-button @click="getSubmitOrderId">确认挂号</el-button>
  </div>
</div>
</template>

<script setup lang="ts">
 import {ref,onMounted} from "vue";
 import {reqDoctorInfo, reqVisitorList} from "@/api/hospital";
 import {useRouter,useRoute} from "vue-router";
 import {
   CircleCheckFilled
 } from '@element-plus/icons-vue'
 import {reqtSubmitOrderId} from "@/api/order";
 const route=useRoute()
 const router=useRouter()
 // 预约人列表
 let VisitorList=ref<any>()
 // 选中的预约人
 let selectedVisitor=ref<any>()
 // 医生信息
 let doctorInfo=ref<any>()

 onMounted(()=>{
   getVisitorList()
   getDoctorInfo()
 })

 // 获取就诊人列表
 const getVisitorList=async ()=>{
   let res=await reqVisitorList()
   VisitorList.value=res.data
   selectedVisitor.value=VisitorList.value[0]
 }

 // 改变选择的就诊人
 const change_selected=(item:any)=>{
   selectedVisitor.value=item
   // console.log(selectedVisitor.value);
 }

 // 获取医生数据
 const getDoctorInfo=async ()=>{
   let res=await reqDoctorInfo(route.query.docId as string)
   doctorInfo.value=res.data
   // console.log(doctorInfo.value);
 }

 // 获取订单id
 const getSubmitOrderId=async ()=>{
   let res=await reqtSubmitOrderId(doctorInfo.value.hoscode,doctorInfo.value.id,selectedVisitor.value.id)
   if(res.code===200){
     goUser(res.data)
   }
 }
 // 进入订单详细页
 const goUser=(id:number)=>{
   router.push({
     path:'/user/orders',
     query:{
       orderId:id
     }
   })
 }

 // 跳转到添加就诊人
 const addVisitor=()=>{
   router.push({
     path:'/user/manage'
   })
 }
</script>

<style scoped lang="scss">
.container{
  .title{
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    font-family: Helvetica Neue,Helvetica,Arial,PingFang SC,Hiragino Sans GB,Heiti SC,Microsoft YaHei,WenQuanYi Micro Hei,sans-serif;
    margin: 50px 0;
    padding: 0;
    box-sizing: border-box;
    margin-top: 20px;
    letter-spacing: 1px;
    font-weight: 700;
    color: #333;
    font-size: 16px;
    margin-right: 30px;
  }
  .visitor{
    width: 100%;
    height: 300px;
    overflow: scroll;
    margin: 40px 0;
    flex-wrap: wrap;
    .visitor_title{
      width: 100%;
      margin-bottom: 20px;
      -webkit-font-smoothing: antialiased;
      -webkit-tap-highlight-color: transparent;
      font-size: 14px;
      font-family: Helvetica Neue,Helvetica,Arial,PingFang SC,Hiragino Sans GB,Heiti SC,Microsoft YaHei,WenQuanYi Micro Hei,sans-serif;
      padding: 0;
      box-sizing: border-box;
      letter-spacing: 1px;
      color: #999;
      display: flex;
      align-items: center;
      .shu{
        width: 3px;
        height: 16px;
        background-color: #4990F1;
        margin-right: 10px;
      }
    }
    .visit_card_title{
      width: 100%;
      margin-bottom: 20px;
      -webkit-font-smoothing: antialiased;
      -webkit-tap-highlight-color: transparent;
      font-size: 14px;
      font-family: Helvetica Neue,Helvetica,Arial,PingFang SC,Hiragino Sans GB,Heiti SC,Microsoft YaHei,WenQuanYi Micro Hei,sans-serif;
      padding: 0;
      box-sizing: border-box;
      letter-spacing: 1px;
      color: #999;
      display: flex;
      align-items: center;
      .shu{
        width: 3px;
        height: 16px;
        background-color: #4990F1;
        margin-right: 10px;
      }
    }
    .visitor_card{
      width: 100%;
      height: 100px;
      display: flex;
      flex-wrap: wrap;
      .card{
        cursor: pointer;
        width: 28%;
        margin: 10px  10px;
        height: 100%;
        display: flex;
        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
        border-radius: 5px;
        &.active{
          background-color: #4990F1;
          color: white;
          transition: all .5s;
          transform: scale(1.05);
        }
        .add{
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          span{
            color:#4990F1 ;
            font-weight: bolder;
          }
        }
        .info{
          width: 70%;
          height: 100%;
          display: flex;
          flex-wrap: wrap;
          padding: 20px 0;

          .name{
            width: 100%;
            height: 60%;
            padding-left: 20px;
          }
          .idCard{
            width: 100%;
            height: 30%;
            display: flex;
            align-items: center;
            &.active{
              color: white;
            }
            padding-left: 20px;
            font-size: 14px;
            color: #A2A2A2;

          }

        }
        .icon{
          width: 30%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
  }
  //隐藏滚动条
  .visitor::-webkit-scrollbar{
    display: none;
  }
  .visit_card_container{
    .visit_card_title{
      width: 100%;
      margin-bottom: 20px;
      -webkit-font-smoothing: antialiased;
      -webkit-tap-highlight-color: transparent;
      font-size: 14px;
      font-family: Helvetica Neue,Helvetica,Arial,PingFang SC,Hiragino Sans GB,Heiti SC,Microsoft YaHei,WenQuanYi Micro Hei,sans-serif;
      padding: 0;
      box-sizing: border-box;
      letter-spacing: 1px;
      color: #999;
      display: flex;
      align-items: center;
      .attention{
        margin-left: 20px;
        color: #FF5F5F;
        font-size: 12px;
      }
      .shu{
        width: 3px;
        height: 16px;
        background-color: #4990F1;
        margin-right: 10px;
      }
    }
    .visit_card{
      cursor: pointer;
      width: 100%;
      height: 150px;
      box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      .card-header{
        width: 100%;
        height: 40%;
        display: flex;
        align-items: center;
        padding-left: 20px;
        font-size: 16px;
      }
      .selected_info{
        width: 100%;
        height: 60%;
        display: flex;
        align-items: center;
        padding-left: 20px;
        div{
          width: 50%;
          height: 60%;
          background-color: #4990F1;
          display: flex;
          align-items: center;
          padding-left: 20px;
          border-radius: 5px;
          span{
            color: white;
            font-size: 14px;
            margin-left: 20px;
            &.visit_type{
              margin: 0px;
              display: flex;
              justify-content: center;
              align-items: center;
              color: #89C4ED;
              width: 40px;
              border-radius: 5px;
              height: 20px;
              background-color: #FFFFFF;
            }
          }
        }
      }

    }
  }
  .register_info{
    margin-top: 50px;
    .register_info_title{
      width: 100%;
      margin-bottom: 20px;
      -webkit-font-smoothing: antialiased;
      -webkit-tap-highlight-color: transparent;
      font-size: 14px;
      font-family: Helvetica Neue,Helvetica,Arial,PingFang SC,Hiragino Sans GB,Heiti SC,Microsoft YaHei,WenQuanYi Micro Hei,sans-serif;
      padding: 0;
      box-sizing: border-box;
      letter-spacing: 1px;
      color: #999;
      display: flex;
      align-items: center;
      .attention{
        margin-left: 20px;
        color: #FF5F5F;
        font-size: 12px;
      }
      .shu{
        width: 3px;
        height: 16px;
        background-color: #4990F1;
        margin-right: 10px;
      }
    }
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    .register_container{
      margin-left: 50px;
      box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
      width: 50%;
      border-radius: 5px;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      padding: 20px 50px;
      div{
        width: 100%;
        height: 50px;
        .title{
          -webkit-font-smoothing: antialiased;
          -webkit-tap-highlight-color: transparent;
          font-family: Helvetica Neue,Helvetica,Arial,PingFang SC,Hiragino Sans GB,Heiti SC,Microsoft YaHei,WenQuanYi Micro Hei,sans-serif;
          text-align: right;
          vertical-align: middle;
          font-size: 15px;
          line-height: 40px;
          padding: 0 0 0 0;
          box-sizing: border-box;
          color: #b2aeae !important;
          letter-spacing: 1px;

        }
        .content{
          -webkit-font-smoothing: antialiased;
          -webkit-tap-highlight-color: transparent;
          line-height: 40px;
          font-size: 14px;
          color: #333;

          font-family: Helvetica Neue,Helvetica,Arial,PingFang SC,Hiragino Sans GB,Heiti SC,Microsoft YaHei,WenQuanYi Micro Hei,sans-serif;
          margin: 0;
          padding: 0;
          box-sizing: border-box;
      }
      }
    }
  }
  .user_info{
    margin-top: 50px;
    .user_info_title{
      width: 100%;
      margin-bottom: 20px;
      -webkit-font-smoothing: antialiased;
      -webkit-tap-highlight-color: transparent;
      font-size: 14px;
      font-family: Helvetica Neue,Helvetica,Arial,PingFang SC,Hiragino Sans GB,Heiti SC,Microsoft YaHei,WenQuanYi Micro Hei,sans-serif;
      padding: 0;
      box-sizing: border-box;
      letter-spacing: 1px;
      color: #999;
      display: flex;
      align-items: center;
      .attention{
        margin-left: 20px;
        color: #FF5F5F;
        font-size: 12px;
      }
      .shu{
        width: 3px;
        height: 16px;
        background-color: #4990F1;
        margin-right: 10px;
      }
    }
    width: 100%;
    height: 300px;
    display: flex;
    flex-wrap: wrap;
    .user_info_container{
      margin-left: 50px;
      height: 100px;
      box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
      width: 50%;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-content: center;
      padding: 20px 100px;
      div{
        width: 100%;
        .title{
          -webkit-font-smoothing: antialiased;
          -webkit-tap-highlight-color: transparent;
          font-family: Helvetica Neue,Helvetica,Arial,PingFang SC,Hiragino Sans GB,Heiti SC,Microsoft YaHei,WenQuanYi Micro Hei,sans-serif;
          text-align: right;
          vertical-align: middle;
          font-size: 15px;
          line-height: 40px;
          padding: 0 0 0 0;
          box-sizing: border-box;
          color: #999!important;
          letter-spacing: 1px;
        }
        .content{
          -webkit-font-smoothing: antialiased;
          -webkit-tap-highlight-color: transparent;
          line-height: 40px;
          font-size: 14px;
          color: #333;
          font-family: Helvetica Neue,Helvetica,Arial,PingFang SC,Hiragino Sans GB,Heiti SC,Microsoft YaHei,WenQuanYi Micro Hei,sans-serif;
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }
      }
    }
  }
  .ensure{
    width: 100%;
    height: 100px;
    margin: 50px 0 100px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    :deep(.el-button){
      width: 140px;
      -webkit-font-smoothing: antialiased;
      -webkit-tap-highlight-color: transparent;
      font-family: Helvetica Neue,Helvetica,Arial,PingFang SC,Hiragino Sans GB,Heiti SC,Microsoft YaHei,WenQuanYi Micro Hei,sans-serif;
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      background-color: #4490f1;
      box-shadow: 0 10px 20px -10px rgba(73,144,241,.5);
      border-radius: 4px;
      height: 50px;
      color: #fff;
      font-size: 16px;
      font-weight: 500;
      transition: all .2s ease;
      user-select: none;
      cursor: pointer;
    }
  }
}
</style>